<template>
  <div>
    <el-form-item :prop="props.field"></el-form-item>
    <div class="images-uploader-container expand-form-item">
      <draggable :list="imageList" animation="180" class="drag-container" item-key="id" drag-class="drag-class" :force-fallback="true" handle=".drag-btn">
        <template #item="{ element, index }">
          <div class="images-item">
            <div class="inner-images-item">
              <div class="img-box" @click="handleChangeImage(element, index)">
                <img :src="element.url" alt="" />
              </div>
              <div class="message-box">
                <el-input v-model="element.title" style="margin-bottom: 10px" placeholder="请输入图片标题"></el-input>
                <el-input :rows="2" type="textarea" resize="none" v-model="element.description" placeholder="请输入图片描述"></el-input>
                <div class="message-box-bottom">
                  <div></div>
                  <div class="newspaper-item-options">
                    <div class="drag-btn">
                      <i class="iconfont">&#xe689;</i>
                    </div>
                    <el-button @click.stop="removeImage(index)">
                      <el-icon><Delete /></el-icon>
                      删除
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </draggable>
      <div class="images-item add-images-item">
        <div class="no-data" @click="showImgUpload = true">
          <i class="iconfont">&#xe609;</i>
          <p>点击添加</p>
        </div>
      </div>
      <div v-if="props.children && props.children.length > 0" class="option-box">
        <div class="option-btn" @click="changeChildrenShow">
          <div class="option-btn-icon">
            <span :class="{ plus: childrenShow }"></span>
          </div>
          <p>{{ childrenShow ? '取消' : '拓展' }}</p>
        </div>
      </div>
      <!-- <ImageUpload v-model:showDialog="showImgUpload" :limit="props.setting.upload_number" :allow="imageAllow" @getImage="handleGetImages" :isToJpg="true" />
      <ImageUpload v-model:showDialog="showImgChange" :limit="1" :allow="imageAllow" @getImage="handleGetImage" :isToJpg="true"></ImageUpload> -->

      <FilesUpload v-if="showImgUpload" v-model:showDialog="showImgUpload" :modelId="1" :isPublic="true" @getFileList="handleGetImages" :isToJpg="true"></FilesUpload>
      <FilesUpload v-if="showImgChange" v-model:showDialog="showImgChange" :limit="1" :modelId="1" :isPublic="true" @getFileList="handleGetImage" :isToJpg="true"></FilesUpload>

    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import draggable from 'vuedraggable'
import { FilesUpload } from "@ruifox-cms/components"

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  },
  field: {
    type: String,
    default: ''
  },
  setting: {
    type: Object,
    default: () => {}
  },
  children: {
    type: Array,
    default: () => []
  },
  childrenShow: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:value', 'update:childrenShow'])
const childrenShow = computed(() => props.childrenShow)
const changeChildrenShow = () => {
  emits('update:childrenShow', !childrenShow.value)
}
const currentImg = ref(0)
const showImgUpload = ref(false)
const showImgChange = ref(false)
const imageList = ref([])
watch(imageList, (newVal) => {
  emits('update:value', JSON.stringify(newVal))
}, { deep: true })
watch(() => props.value, (newVal) => {
  imageList.value = JSON.parse(newVal)
}, { once: true, deep: true})
// const imageAllow = computed(() => {
//   if (props.setting.accept) {
//     // 分割字符串
//     let _accept = []
//     props.setting.accept.split('|').forEach(item => {
//       let type = '.' + item
//       _accept.push(type)
//     })
//     return _accept.join(',')
//   } else {
//     return 'image/png, image/jpeg'
//   }
// })

// 添加图片
const handleGetImages = imgList => {
  let _imageList = imgList.map(item => {
    return {
      id: item.id,
      url: item.url,
      title: item.name,
      description: item.description
    }
  })
  let total = _imageList.length + imageList.value.length
  if (total > props.setting.upload_number) {
    ElMessage.error('最多上传' + props.setting.upload_number + '张图片')
    return
  }
  imageList.value = imageList.value.concat(_imageList)
}

// 替换图片
const handleGetImage = imgList => {
  let _img = {
    id: imgList[0].id,
    url: imgList[0].url,
    title: imgList[0].name,
    description: ''
  }
  imageList.value[currentImg.value] = _img
}
const removeImage = index => {
  imageList.value.splice(index, 1)
}
const handleChangeImage = (data, index) => {
  currentImg.value = index
  showImgChange.value = true
}
</script>

<style scoped lang="scss">
.images-uploader-container {
  max-width: 100%;
  width: 100%;
  .images-item {
    height: 185px;
    width: 100%;
    border: 1px solid #d7d7d7;
    box-sizing: border-box;
    .no-data {
      box-sizing: border-box;
      cursor: pointer;
      padding: 20px;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      i {
        font-size: 43px;
        color: $hoverColor;
        margin-bottom: 5px;
      }
      p {
        margin-top: 5px;
        font-size: 14px;
        color: $mainColor;
      }
    }
    .inner-images-item {
      box-sizing: border-box;
      padding: 20px;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      .img-box {
        height: 105px;
        width: 155px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border: 1px solid #e4e4e4;
        background-color: #f8f8f8;
        margin-right: 30px;
        cursor: pointer;
        img {
          max-height: 100%;
          max-width: 100%;
        }
      }
      .message-box {
        height: 80px;
        flex: 1;
        .message-box-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
          p {
            font-size: 14px;
            color: #aaaaaa;
          }
          .newspaper-item-options {
            display: flex;
            .drag-btn {
              display: flex;
              box-sizing: border-box;
              border: 1px solid #dcdfe6;
              border-radius: 5px;
              height: 32px;
              width: 32px;
              margin-right: 10px;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              user-select: none;
              i {
                color: #606266;
                font-size: 28px;
              }
            }
          }
        }
      }
    }
  }
  .images-item + .images-item {
    margin-top: 10px;
  }
  .add-images-item {
    margin-top: 10px;
  }
}
</style>
